<style scoped lang='less'>
    .home-page {
        position: fixed;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: #001F48;
        .row {
            color: white;
        }
        .mynav {
            list-style-type: none;
            display: inline-block;
            *display: inline;
            zoom: 1;
        }

        .mynav li {
            float: left;
        }

        .mynav li a {
            text-align: center;
            width: 120px;
            display: block;
            text-decoration: none;
            color: #cccccc;
        }

        .mynav li a img {
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

        .mypanel-title {
            background: url('../../assets/image/title.png');
            background-repeat: round;
            background-size: cover;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
            margin-top: 15px;
            color: black;
            .title-icon{
                width: 18px;
            }
        }

        .mypanel-content {
            background-color: #001F59;
        }

        .mypanel-bottom {
            background: url('../../assets/image/panel_bottom.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            text-align: center;
            height: 30px;
            line-height: 30px;
            font-weight: bold;
        }

        .zhiban-content {
            height: 170px;
            width: 100%;
            overflow: auto;
        }
        .zhiban-content {
            padding: 10px;
            display: flex;
            .zhiban-img {
                width: 50px;
                height: 80px;
                margin-bottom: 10px;
            }
        }

        .zhiban-content::-webkit-scrollbar { /*滚动条整体样式*/
            width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 10px;
        }

        .zhiban-content::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            background: #00698C;
        }

        .zhiban-content::-webkit-scrollbar-track { /*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            background: #EDEDED;
        }

        .news-ul {
            margin-bottom: 0;
        }

        .news-ul li {
            list-style-image: url('../../assets/image/li_icon.png');
            color: #cccccc;
            height: 30px;
            line-height: 30px;
            display: flex;
        }
        .news-ul .news-title {
            color: #337ab7;
            margin-left: 10px;
        }

        .my-progress {
            width: 100%;
            background-color: aquamarine;
            height: 10px;
        }

        .my-progress div {
            height: 10px;
            background-color: chocolate;
        }
        .five-line {
            display: flex;
            margin-bottom: 5px;
            .name {
                color: floralwhite;
                width: 12%;
                font-size: 12px;
            }
            .linear-text {
                width: 100%;
                display: flex;
                .linear {
                    height: 20px;
                    background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
                    border-top-right-radius: 25px;
                    border-bottom-right-radius: 25px;
                    width: 80%;
                    margin: 0 10px;
                }
            }
        }
        .six-liang {
            display: flex;
            /*border-bottom: 1px solid #f1f4f5;*/
            padding: 10px;
            flex-wrap: wrap;
            justify-content: center;
            .item {
                display: flex;
                width: 100%;
                padding: 10px;
                margin-bottom: 20px;
                justify-content: space-around;
                align-items: center;
                border-bottom: 1px solid white;
                .num {
                    color: #00a0e9;
                    font-weight: bolder;
                }
            }
        }
        .demo-circle-custom {
            & h1 {
                color: #3f414d;
                font-size: 28px;
                font-weight: normal;
            }
            & p {
                color: #657180;
                font-size: 14px;
                margin: 10px 0 15px;
            }
            & span {
                display: block;
                padding-top: 15px;
                color: #657180;
                font-size: 14px;
                &:before {
                    content: '';
                    display: block;
                    width: 50px;
                    height: 1px;
                    margin: 0 auto;
                    background: #e0e3e6;
                    position: relative;
                    top: -15px;
                }
            ;
            }
            & span i {
                font-style: normal;
                color: #3f414d;
            }
        }
    }
</style>
<template>
    <div class="home-page">
        <div class="container-fluid">
            <homeNav></homeNav>
            <!--<div class="row" style="background-color: #00698C; padding-top: 10px;justify-content: center;">-->
                <!--<div class="col-xs-12">-->
                    <!--&lt;!&ndash; 导航区域 &ndash;&gt;-->
                  <!---->
                <!--</div>-->
            <!--</div>-->

            <div class="row">
                <div class="col-md-3">
                    <!-- 左侧内容区 -->
                    <!-- 值班 -->
                    <!--<div id="divZhiBan" class="mypanel">-->
                    <!--<div class="mypanel-title">值班编队</div>-->
                    <!--<div class="mypanel-content">-->
                    <!--<div class="zhiban-content">-->
                    <!--<template v-for="(item,index) in teamArr">-->
                    <!--<div>-->
                    <!--<img class="zhiban-img" :src="apiUtil + item.HeadImg" alt="">-->
                    <!--<p class="zhiban-name">{{item.RealName}}</p>-->
                    <!--</div>-->
                    <!--</template>-->
                    <!--</div>-->
                    <!--</div>-->
                    <!--<div class="mypanel-bottom"></div>-->
                    <!--</div>-->
                    <!-- 通知公告 -->
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_tongzhi.png" alt=""> 通知公告</div>
                        <div class="mypanel-content">
                            <ul class="news-ul" id="newsList" style="padding-left:30px;">
                                <template v-for="(item,index) in noticeArr">
                                    <li @click="jumpPage(item.Id,'NoticeDetail')">
                                        <div class="news-date">{{item.Createdate}}</div>
                                        <div class="news-title">{{item.Subtitle}}</div>
                                    </li>
                                </template>
                            </ul>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                </div>
                <div class="col-md-6" style="text-align: center;">
                    <!-- 中间内容区 -->
                    <!--<iframe id="contentFrame" style="width: 100%; border: none; background-color: transparent"-->
                    <!--src="restFramePage.html"></iframe>-->
                    <!--<div id="renyuan" style="width: 900px;height:700px;"></div>-->
                    <!--<i-circle-->
                    <!--:size="250"-->
                    <!--:trail-width="4"-->
                    <!--:stroke-width="5"-->
                    <!--:percent="75"-->
                    <!--stroke-linecap="square"-->
                    <!--stroke-color="#43a3fb">-->
                    <!--<div class="demo-circle-custom">-->
                    <!--<h1>{{ 42001776 | currency '' 0 }}</h1>-->
                    <!--<p>消费人群规模</p>-->
                    <!--<span>-->
                    <!--总占人数<i>75%</i>-->
                    <!--</span>-->
                    <!--</div>-->
                    <!--</i-circle>-->
                    <!---->
                    <!--<div id="guage" style="width: 900px;height:700px;"></div>-->
                    <template v-for="(item,index) in teamArr">
                        <div class="mypanel">
                            <div class="mypanel-title">
                                <img class="title-icon" src="../../assets/image/title_icon_team.png" alt="">  {{item.TeamName}}</div>
                            <div class="mypanel-content">
                                <div class="zhiban-content">
                                    <template v-for="(itemSub,index) in item.Members">
                                        <div>
                                            <img class="zhiban-img" :src="apiUtil + itemSub.HeadImg" alt="">
                                            <p class="zhiban-name">{{itemSub.RealName}}</p>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="mypanel-bottom"></div>
                        </div>
                    </template>

                    <div class="mypanel">
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_shuju.png" alt="">  数据展示</div>
                        <div class="mypanel-content">
                            <div class="zhiban-content">
                                <div id="guage1" style="width: 600px;"></div>
                                <div id="guage2" style="width: 600px;"></div>
                                <div id="guage3" style="width: 600px;"></div>
                                <div id="guage4" style="width: 600px;"></div>
                            </div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>

                </div>
                <div class="col-md-3">
                    <!-- 右侧内容区 -->
                    <!-- 五率 -->
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_wu.png" alt=""> 五率</div>
                        <div class="mypanel-content" style="padding:15px">
                            <template v-for="(item,index) in fiveArr">
                                <div class="five-line">
                                    <p class="name">{{item.Title}}</p>
                                    <div class="linear-text">
                                        <p :style="'width:'+item.Percent + '%'" class="linear"></p>
                                        <p class="text">{{item.Percent}}</p>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <!-- 六量 -->
                    <div>
                        <div class="mypanel-title">
                            <img class="title-icon" src="../../assets/image/title_icon_liu.png" alt=""> 六量</div>
                        <div class="mypanel-content">
                            <div class="six-liang">
                                <template v-for="(item,index) in siArr">
                                    <div class="right item">
                                        <div>
                                            <p class="title">{{item.Title}}</p>
                                            <p class="num">共{{item.Value}}</p>
                                        </div>
                                        <div>
                                            <template v-if="item.Percent == '0' || item.Percent == 0">
                                                <i-circle :percent="100" size="90">
                                                    <span class="demo-circle-inner" style="font-size:24px">100%</span>
                                                </i-circle>
                                            </template>
                                            <template v-else>
                                                <i-circle :percent="item.Percent" size="90">
                                                    <span class="demo-circle-inner" style="font-size:24px">{{item.Percent}}%</span>
                                                </i-circle>
                                            </template>
                                        </div>
                                    </div>
                                    <!--<div class="right item">-->
                                    <!--<div>-->
                                    <!--<p class="title">站救药器材储备量</p>-->
                                    <!--<p class="num">共2101套</p>-->
                                    <!--</div>-->
                                    <!--<div>-->
                                    <!--<i-circle :percent="80" size="90">-->
                                    <!--<span class="demo-circle-inner" style="font-size:24px">80%</span>-->
                                    <!--</i-circle>-->
                                    <!--</div>-->
                                    <!--</div>-->
                                </template>
                            </div>
                        </div>
                        <div class="mypanel-bottom"></div>
                    </div>
                    <!-- 右侧内容区结束 -->
                </div>
                <div class="col-md-3">
                    <!-- 左侧内容区 -->
                </div>
            </div>
        </div>

        <!-- 新闻浏览对话框 -->
        <div id="newsView" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="newsTitle">[News Title]</h4>
                    </div>
                    <div class="modal-body">
                        <p>发布时间：<span id="newsPubDate">[PubDate]</span></p>
                        <p id="newsContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新闻浏览对话框结束 -->
        <!-- 人员查看详情对话框 -->
        <div id="peopleDetail" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="newsViewModelLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title">人员信息一览</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            <img id="peopleHeadImg" src="" alt="人员头像" style="width: 120px; height: 160px;"/>
                        </p>
                        <p>
                            姓名：<span id="peopleName"></span>
                        </p>
                        <p>
                            性别：<span id="peopleSex"></span>
                        </p>
                        <p>
                            职务：<span id="peopleDuty"></span>
                        </p>
                        <p>
                            所在部门：<span id="peopleOrgName"></span>
                        </p>
                        <p>
                            联系方式：<span id="peopleContact"></span>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';
    import homeNav from '../../components/homeNav';

    export default {
        data() {
            return {
                apiUtil: apiUtil.urls.baseUrl,
                //值班编队
                teamArr: [],
                //五率
                fiveArr: [],
                //六量
                siArr: [],
                //通知公告
                noticeArr: [],
                //值班编队
                zbTeamArr: [],
                //仪表盘数据
                gaugeArr: [],
            }
        },
        mounted: function () {},
        created: function () {
            this.getTeamMembers();
            this.getFive();
            this.getSix();
            this.getNotice();
            this.getZbTeam();
            this.getGauge();
        },
        components:{
            homeNav
        },
        methods: {
            jumpPage: function () {
            },
            //提醒待办详情
            jumpMsgDetail: function (id) {
                let that = this;

                let para = {
                    msgid: id,
                };

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMyMsgDetail, para, function (res) {
                    that.$Loading.finish();
                    that.$Modal.confirm({
                        title: '详情',
                        content: res.Msg.Content,
                        onOk: () => {
                        },
                        onCancel: () => {
                        }
                    });
                });
            },
            //通知公告
            getNotice: function () {
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetMingSheQing, para, function (res) {
                    that.$Loading.finish();
                    that.noticeArr = res.Msg;
                });
            },
            //值班编队
            getTeamMembers: function () {
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetZbTeam, para, function (res) {
                    that.$Loading.finish();
                    that.teamArr = res.Msg;
                });
            },
            //五率
            getFive: function () {
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetFive, para, function (res) {
                    that.$Loading.finish();
                    that.fiveArr = res.Msg;
                });
            },
            //六量
            getSix: function () {
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetSix, para, function (res) {
                    that.$Loading.finish();
                    that.siArr = res.Msg;
                });
            },
            //值班编队
            getZbTeam: function () {
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetZbTeam, para, function (res) {
                    that.$Loading.finish();
                    that.zbTeamArr = res.Msg;
                });
            },
            getGauge: function () {
                let that = this;

                let para = {};

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetZbZaiWei, para, function (res) {
                    that.$Loading.finish();
                    that.gaugeArr = res.Msg;
                    that.gaugeChar1();
                    that.gaugeChar2();
                    that.gaugeChar3();
                    that.gaugeChar4();
                });
            },
            //仪表图
            gaugeChar1: function () {
                let that = this;
                let myChart = this.$echarts.init(document.getElementById("guage1"));

                let option = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}%',
                               textStyle:{
                                    fontSize:12,
                               }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 5 // 这个是修改宽度的属性
                                }
                            },
                            pointer:{
                                width:1
                            },
                            data: [
                                that.gaugeArr[0]
                            ],
                            axisLabel:{
                                distance:-60
                            },
                        }
                    ]
                };

                myChart.setOption(option, true);

            },
            gaugeChar2: function () {
                let that = this;

                let myChart = this.$echarts.init(document.getElementById("guage2"));

                let option = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}%',
                                textStyle:{
                                    fontSize:12,
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 5 // 这个是修改宽度的属性
                                }
                            },
                            pointer:{
                                width:1
                            },

                            axisLabel:{
                                distance:-60
                            },
                            data: [
                                that.gaugeArr[1]
                            ]
                        }
                    ]
                };

                myChart.setOption(option, true);

            },
            gaugeChar3: function () {
                let that = this;

                let myChart = this.$echarts.init(document.getElementById("guage3"));

                let option = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}%',
                                textStyle:{
                                    fontSize:12,
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 5 // 这个是修改宽度的属性
                                }
                            },
                            pointer:{
                                width:1
                            },
                            data: [
                                that.gaugeArr[2]
                            ],
                            axisLabel:{
                                distance:-60
                            },
                        }
                    ]
                };

                myChart.setOption(option, true);
                UserAdd
            },
            gaugeChar4: function () {
                let that = this;

                let myChart = this.$echarts.init(document.getElementById("guage4"));

                let option = {
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}%',
                                textStyle:{
                                    fontSize:12,
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 5 // 这个是修改宽度的属性
                                }
                            },
                            pointer:{
                                width:1
                            },
                            data: [
                                that.gaugeArr[3]
                            ],
                            axisLabel:{
                                distance:-60
                            },
                        }
                    ]
                };

                myChart.setOption(option, true);

            },
        }
    }
</script>
